<template>
  <view>
    <tui-bottom-navigation
      :current="tabbleStore.current"
      :itemList="tabBarList"
      @click="tabbar"
      selectedColor="#ffb2b2"
      backgroundColor="rgba(248, 248, 248, 0.9)"
      :unlined="false"
    ></tui-bottom-navigation>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { useTabbarStore } from '@/stores/index';

  const tabbleStore = useTabbarStore();
  // 子组件传递参数
  const tabbar = (e) => {
    tabbleStore.setCurrent(e.index);
    //其他逻辑自行处理
    uni.switchTab({
      url: tabBarList.value[tabbleStore.current].pagePath,
    });
  };
  // 菜单栏集合 - 与 pages.json -> tabbar 配置一样
  const tabBarList = ref<Array<any>>([
    {
      pagePath: '/pages/index/index',
      iconPath:
        'http://113.45.143.73:9050/meal-images/2024-11/25/2776444e-e14d-4f39-bb26-41eb257396f5.png',
      selectedIconPath:
        'http://113.45.143.73:9050/meal-images/2024-11/25/81ba8b81-2940-4387-a5fe-00fdb5e9665d.png',
      text: '功能',
      type: 1,
    },
    {
      pagePath: '/pages/order/order',
      iconPath:
        'http://113.45.143.73:9050/meal-images/2024-11/25/94a6feb7-cb45-40a2-b3ec-410f8fb449fc.png',
      selectedIconPath:
        'http://113.45.143.73:9050/meal-images/2024-11/25/b627c86a-180c-40a6-bd85-1a627c6e6f88.png',
      text: '订单',
      type: 1,
    },
    {
      pagePath: '/pages/my/my',
      iconPath:
        'http://113.45.143.73:9050/meal-images/2024-11/25/868d36da-480f-409f-aba5-52b47ab86297.png',
      selectedIconPath:
        'http://113.45.143.73:9050/meal-images/2024-11/25/2e7e0515-0aa4-45cc-be2d-a086c595fc05.png',
      text: '我的',
      type: 1,
    },
  ]);
</script>

<style lang="scss"></style>
